<script setup lang="ts">
import {onMounted, shallowRef, watch} from "vue";
import {useRoute} from 'vue-router';
import {backupRoute, helpRoute, homeRoute, settingRoute, syncRoute} from "@/router/routePath";

const defaultActiveName = shallowRef("home");
const route = useRoute();


const getTopRoute = () => {
  // console.log('当前路由路径：', route.path);
  const topRoute = route.path.split('/')[1];
  // console.log("topRoute", topRoute);
  defaultActiveName.value = `/${topRoute}`;
};

onMounted(() => {
  getTopRoute();
});

watch(() => route.path, (newPath, oldPath) => {
  getTopRoute();
}, );
</script>

<template>
  <el-container class="background">
    <el-header class="background-header">
      <div class="background-header-left">
        <i class="project-logo"></i>
        <span class="project-name">书签管理器</span>
      </div>
    </el-header>
    <el-row class="background-body">
      <el-col :span="3"></el-col>
      <el-col :span="18">
        <el-container>
          <el-aside width="200px">
            <el-menu
                class="background-nav-menu"
                :default-active="defaultActiveName"
                :router="true"
            >
              <el-menu-item class="background-nav-menu-item" :index="homeRoute">首页</el-menu-item>
              <el-menu-item class="background-nav-menu-item" :index="settingRoute">基础设置</el-menu-item>
              <el-menu-item class="background-nav-menu-item" :index="syncRoute">同步书签</el-menu-item>
              <el-menu-item class="background-nav-menu-item" :index="backupRoute">备份</el-menu-item>
              <el-menu-item class="background-nav-menu-item" :index="helpRoute">帮助</el-menu-item>
            </el-menu>
          </el-aside>
          <el-container>
            <el-main>
              <router-view></router-view>
            </el-main>
          </el-container>
        </el-container>
      </el-col>
      <el-col :span="3"></el-col>
    </el-row>

  </el-container>
</template>

<style>
span {
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
}
.background-header {
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); */
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.background-header-left {
  display: flex;
  align-items: center;
  user-select: none;
}
.project-logo {
  width: 40px;
  height: 40px;
  background-image: url('@/assets/img/48x48.png');
  background-size: contain;
  display: inline-block;
}
.project-name {
  font-size: 20px;
  font-weight: 800;
}
.background-body {
  height: 100vh;
}
.background-nav-menu {
  height: 80vh;
}
.background-nav-menu-item {
  user-select: none;
}
</style>